<template>
	<view class="topTabbar">
		<view class="tabItem" v-for="(item,index) of items" 
		:key="index" 
		:class="activeIndex===index? 'active' :''" 
		@tap = "tabSwitch(index)">
			<text class="tabText">{{item}}</text>
			<view class="bottomline"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items:['精选','图书','美食','美景','百货'],
				activeIndex:0
			};
		},
		methods:{
			tabSwitch(index){
				this.activeIndex = index
				
		}
    },
}
</script>

<style lang="scss">
	.topTabbar{
		display: flex;
		justify-content:space-around;
	}
	.tabItem{
		display: flex;
		flex-direction: column;
		font-weight: bold;
		font-family:宋体;
	}
	.tabText{
		color: #757576;
		
	}.active{
		.tabText{
			color: black;
		}.bottomline{
			background: #EE4633;
			height: 8upx;
			border-radius: 4upx;
			
		}
	}

</style>
